<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">发送Ajax请求</button>
    <script>
        /*问题：在低版本IE浏览器中，Ajax请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求
        会真正发送到 服务器端，后续的请求都会从浏览器的缓存中获取结果，即使服务器端的数据更新 了
        客户端依然拿到的是缓存中的额旧数据
        
        解决方法：在请求地址的后面加请求参数，保证每一次请求中的参数的值不同*/
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            //创建Ajax对象 
        var xhr = new XMLHttpRequest();
        //告诉Ajax请求方式和请求地址
        xhr.open('get','http://localhost:3000/cache?t='+Math.random());
        //3.发送请求
        xhr.send();
        //获取服务器端响应的数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                alert(xhr.responseText);
            }
        }
    }
    </script>
</body>
</html>